<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title></title>
    <link href="${BasePath}/weixin/css/mui.min.css" rel="stylesheet"/>
    <link href="${BasePath}/weixin/css/mui-color.css" rel="stylesheet"/>
	<link href="${BasePath}/weixin/css/mui-font.css" rel="stylesheet"/>
	<link href="${BasePath}/weixin/fonts/font-awesome.min.css" rel="stylesheet"/>
	<link href="${BasePath}/weixin/css/common.css" rel="stylesheet"/>
  
		<style>
			/*跨webview需要手动指定位置*/
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
            .mui-table-view-cell{
            	height: 3.25em;
            }
html{    height: 100%;
    overflow: hidden;
    background-color: #fff;}
		</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left ft-c-g fs-20"></a>
			<span class=" ft-c-b fs-18 back-name">氧币充值</span>
			<h1 class="mui-title ft-c-b fs-16"></h1>
		</header>
		<div class="mui-content">
			
			
			<!--充值金额-->
			<div class="mg-t recharge-money bg-w">
				<!--有值金额-->
				<div class="rm-list mui-text-center  mg-t-1">
					<div class="mui-text-left rm-des  mg-b">请选择充值金额为您的帐户充值：</div>
					<!--<span class="rm-money fs-14 rmm-select">200氧币<p>¥198</p><i class="fa fa-ok-s"></i></span>
					<span class="rm-money fs-14">200氧币<p>¥198</p><i class="fa fa-ok-s"></i></span>
					<br>
					<span class="rm-money fs-14">200氧币<p>¥198</p><i class="fa fa-ok-s"></i></span>
					<span class="rm-money fs-14">200氧币<p>¥198</p><i class="fa fa-ok-s"></i></span>-->
					<#list coinList as coin>
						<span id="${coin.id}" class="rm-money fs-14">${coin.name}<p>¥${coin.price}</p><i class="fa fa-ok-s"></i></span>
					</#list>
				</div>
				
				<!--操作按钮-->
				<div class="rm-list mui-text-center mg-l mg-r">
				<a id="recharge" href="#middlePopover" class="mui-btn mui-btn-warning mui-btn-block" style="padding: 0.625em 1.25em;">充值</a>

				</div>
			</div>

		</div>
		

		<script src="${BasePath}/weixin/js/jquery.js"></script>
		<script src="${BasePath}/weixin/js/mui.min.js"></script>
		<script type="text/javascript" src="${BasePath}/js/weixinAjaxHeader.js"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui('.mui-scroll-wrapper').scroll();
			mui('body').on('shown', '.mui-popover', function(e) {
				//console.log('shown', e.detail.id);//detail为当前popover元素
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});
			//mui('.mui-popover').popover('toggle');
			mui(".rm-list").on('tap','.rm-money',function(){
				$(".rm-money").removeClass("rmm-select");
			    $(this).toggleClass("rmm-select");			  
			});
			$(".rm-money").eq(0).addClass("rmm-select");
			$("#recharge").click(function(){
			    var coinId = $(".rmm-select").attr("id");
			    var memberId = '${member.id}';
                var param = {
                    memberId: memberId,
                    coinId: coinId
                };
                //生成订单
                var orderId = recharge(getReqData(param));
                var payAmount = parseFloat($(".rmm-select p").text().replace("¥",""));
                if(orderId){
					//调用微信统一下单接口
					var openid = getCookie("openid");
					param = {
						memberId: '${member.id}',
						subject: '氧币充值',
						outOrderId: orderId,
						outOrderNo: orderId,
                        payMode: 105,
						outOrderType: 3,
						payAmount: payAmount,
						openid:openid
					};
					var preData = wxprepay(getReqData(param));
					// preData['timeStamp'] = preData['timeStamp'] + "";
					//调用微信jsapi支付
                    onBridgeReady(preData);

                }

            });

            function recharge(param){
                var ret = false;
                console.log("coin recharge:" + param);
                $.ajax({
                    type: 'post',
                    cache:false,
                    async:false,
                    url: "${BasePath}/api/coin/recharge",
                    data: param,
                    dataType: "JSON",
                    contentType: "application/json",
                    success: function(data){
                        console.log("recharge data:" + JSON.stringify(data));
                        ret = JSON.parse(data.responseData).id;
                    },
                    error: function(request) {
                        prompt($(".prompt"), "系统繁忙，请稍候重试！");
                    }
                });
                return ret;
            }
            function wxprepay(param){
                var ret = false;
                console.log("weixin prepay:" + param);
                $.ajax({
                    type: 'post',
                    cache:false,
                    async:false,
                    url: "${BasePath}/api/pay/placeOrder",
                    data: param,
                    dataType: "JSON",
                    contentType: "application/json",
                    success: function(data){
                        console.log("prepay data:" + JSON.stringify(data));
                        var responseData = JSON.parse(data.responseData);
                        console.log("payData:" + JSON.parse(responseData).payData);
                        ret = JSON.parse(responseData).payData;
                    },
                    error: function(request) {
                        prompt($(".prompt"), "系统繁忙，请稍候重试！");
                    }
                });
                return ret;
            }
            function getCookie(c_name)
            {
                if (document.cookie.length>0)
                {
                    c_start=document.cookie.indexOf(c_name + "=")
                    if (c_start!=-1)
                    {
                        c_start=c_start + c_name.length+1
                        c_end=document.cookie.indexOf(";",c_start)
                        if (c_end==-1) c_end=document.cookie.length
                        return unescape(document.cookie.substring(c_start,c_end))
                    }
                }
                return "";
            }
            function getReqData(param){
                var ret = {
                    "version":"1.0",
                    "requestData":JSON.stringify(param)
				}
				return JSON.stringify(ret);
			}
            function onBridgeReady(payData){
                var data = JSON.parse(payData);
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',  {
                        "appId":data.appId,     //公众号名称，由商户传入
                        "timeStamp":data.timeStamp,         //时间戳，自1970年以来的秒数
                        "nonceStr":data.nonceStr, //随机串
                        "package":data.package,
                        "signType":data.signType,         //微信签名方式：
                        "paySign":data.sign //微信签名
                    },
                    function(res){
                        if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                    }
                );
            }

		</script>
</body>
</html>